<template>
    <div class="qilin-QilinForm">
        <div class="header">注意</div>
        <div class="content warning">
            若表单内级联组件必填，则trigger触发方式须填change或含change；
        </div>
        <br>
        <div class="header">基本使用</div>
        <QilinForm v-model:formConfig="formConfig" ref="formConfigRef">
            <template v-slot:projectIntroduce="slotData">
                <el-form-item :label="slotData.data.item.labelName" :prop="slotData.data.item.dataName"
                    :style="slotData.data.item.style"
                >
                    <el-input v-model="formConfig.submitData[slotData.data.item.dataName]"
                        placeholder="请输入项目介绍！！type=itemSlot插槽"
                    ></el-input>
                </el-form-item>
            </template>
            <template v-slot:evaluation="slotData">
                <el-input v-model="formConfig.submitData[slotData.data.item.dataName]"
                    placeholder="请输入个人评价~~~type=slot插槽"
                ></el-input>
            </template>
            <template v-slot:extraFormItem>
                <el-form-item label="年收入" prop="salary" style="width:50%">
                    <el-input v-model="formConfig.submitData.salary" placeholder="分逼不挣，extraFormItem插槽"></el-input>
                </el-form-item>
            </template>
            <template v-slot:extraItem>
                <div>这是独立于form表单之外的插槽元素，常用于一些项目的额外奇葩的需求实现！</div>
            </template>
        </QilinForm>
        <br>
        <CodeMirror :codeValue="codeValue1"></CodeMirror>
        <br>
        <br>
        <div class="header">Props</div>
        <QilinTable v-model:tableConfig="propsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Events</div>
        <QilinTable v-model:tableConfig="eventsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Exposes</div>
        <QilinTable v-model:tableConfig="exposesTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Slots</div>
        <QilinTable v-model:tableConfig="slotsTableConfig"></QilinTable>
        <br>
        <br>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/
// 获取提交表单元素DOM
const formConfigRef=ref(null);


/*
    计算属性等代码区域
*/
const codeValue1=computed(()=>{
    return `
        // --html部分
        <QilinForm v-model:formConfig="formConfig" ref="formConfigRef">
            <template v-slot:projectIntroduce="slotData">
                <el-form-item :label="slotData.data.item.labelName" :prop="slotData.data.item.dataName"
                    :style="slotData.data.item.style"
                >
                    <el-input v-model="formConfig.submitData[slotData.data.item.dataName]"
                        placeholder="请输入项目介绍！！type=itemSlot插槽"
                    ></el-input>
                </el-form-item>
            </template>
            <template v-slot:evaluation="slotData">
                <el-input v-model="formConfig.submitData[slotData.data.item.dataName]"
                    placeholder="请输入个人评价~~~type=slot插槽"
                ></el-input>
            </template>
            <template v-slot:extraFormItem>
                <el-form-item label="年收入" prop="salary" style="width:50%">
                    <el-input v-model="formConfig.submitData.salary" placeholder="分逼不挣，extraFormItem插槽"></el-input>
                </el-form-item>
            </template>
            <template v-slot:extraItem>
                <div>这是独立于form表单之外的插槽元素，常用于一些项目的额外奇葩的需求实现！</div>
            </template>
        </QilinForm>
        // --js部分
        // 获取提交表单元素DOM
        const formConfigRef=ref(null);
        const formConfig=reactive({
            elFormConfig:{
                labelWidth:"100px",
                labelSuffix:"："
            },
            itemConfig:[
                {
                    labelName:"简介",
                    dataName:"description",
                    type:"input",
                    inputType:"textarea",
                    rows:3,
                    width:24
                },
                {
                    labelName:"姓名",
                    dataName:"name",
                    type:"input",
                    inputType:"text",
                    width:6,
                    validate:[
                        {
                            required:true,
                            message:"请输入姓名",
                            trigger:"blur"
                        }
                    ]
                },
                {
                    labelName:"银行卡密码",
                    dataName:"bankPassword",
                    type:"input",
                    inputType:"password",
                    width:6
                },
                {
                    labelName:"身份证号码",
                    dataName:"idCard",
                    type:"input",
                    inputType:"number",
                    width:6,
                    otherValidate:"idCardValidator"
                },
                {
                    labelName:"手机号码",
                    dataName:"phonenumber",
                    type:"input",
                    inputType:"text",
                    width:6,
                    otherValidate:"phoneValidator"
                },
                {
                    labelName:"出生日期",
                    dataName:"birthday",
                    type:"date",
                    dateType:"date",
                    width:6
                },
                {
                    labelName:"年龄",
                    dataName:"age",
                    type:"number",
                    width:6
                },
                {
                    labelName:"性别",
                    dataName:"gender",
                    type:"select",
                    dataListName:"genderList",
                    width:6
                },
                {
                    labelName:"参与项目",
                    dataName:"projectName",
                    type:"cascader",
                    dataListName:"projectNameList",
                    cascaderProps:{
                        label:"name",
                        value:"id",
                        children:"children"
                    },
                    width:6
                },
                {
                    labelName:"项目介绍",
                    dataName:"projectIntroduce",
                    type:"itemSlot",
                    slotName:"projectIntroduce",
                    style:"width:100%;"
                },
                {
                    labelName:"身份",
                    dataName:"identify",
                    type:"radio",
                    dataListName:"identifyList",
                    width:6
                },
                {
                    labelName:"开关",
                    dataName:"switch",
                    type:"switch",
                    activeText:"开启",
                    inactiveText:"关闭",
                    activeValue:0,
                    inactiveValue:1,
                    width:6
                },
                {
                    labelName:"爱好",
                    dataName:"hobby",
                    type:"checkbox",
                    dataListName:"hobbyList",
                    width:12
                },
                {
                    labelName:"上传附件",
                    dataName:"file",
                    type:"upload",
                    fileList:[],
                    limit:1,
                    uploadText:"不上传服务器方式",
                    width:12,
                    previewFn:(item)=>{
                        console.log(item);
                    }
                },
                {
                    labelName:"上传附件",
                    dataName:"file1",
                    type:"upload",
                    action:"http://47.122.16.23:8081/common/upload",
                    headers:{
                        Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoyNDIiLCJyblN0ciI6InF0alRMQ0tjS1lSbkl6S2VtR2VXbkFXc1loVm44WThzIiwidXNlcklkIjoyNDJ9.cj3Wd6Vugx2MdT6jJHCC-m3npJuYtF8dvBkwsIg6Z38"
                    },
                    autoUpload:true,
                    fileList:[],
                    limit:1,
                    uploadText:"上传服务器方式",
                    width:12,
                    previewFn:(item)=>{
                        console.log(item);
                    }
                },
                {
                    labelName:"上传图片",
                    dataName:"image",
                    type:"image",
                    fileList:[],
                    limit:1,
                    fileTypeText:"不上传服务器方式",
                    width:8
                },
                {
                    labelName:"上传图片",
                    dataName:"image1",
                    type:"image",
                    action:"http://47.122.16.23:8081/common/upload",
                    headers:{
                        Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoyNDIiLCJyblN0ciI6InF0alRMQ0tjS1lSbkl6S2VtR2VXbkFXc1loVm44WThzIiwidXNlcklkIjoyNDJ9.cj3Wd6Vugx2MdT6jJHCC-m3npJuYtF8dvBkwsIg6Z38"
                    },
                    autoUpload:true,
                    fileList:[],
                    limit:1,
                    fileTypeText:"上传服务器方式",
                    width:8
                },
                {
                    labelName:"上传图片",
                    dataName:"image2",
                    type:"image",
                    fileList:[],
                    fileTypeText:"另一种样式",
                    showIconImage:true,
                    width:8
                },
                {
                    labelName:"人物介绍",
                    dataName:"richtext",
                    type:"wangEditor",
                    wangEditorConfig:{
                        editorConfig:{
                            placeholder:"请输入内容......"
                        }
                    },
                    width:24
                },
                {
                    labelName:"项目成就",
                    dataName:"richtext1",
                    type:"vueEditor",
                    editifyConfig:{
                        autoHeight:true
                    },
                    width:24
                },
                {
                    labelName:"个人评价",
                    dataName:"evaluation",
                    type:"slot",
                    slotName:"evaluation",
                    width:12
                }
            ],
            selectLists:{
                genderList:[
                    {
                        label:"男",
                        value:0
                    },
                    {
                        label:"女",
                        value:1
                    },
                    {
                        label:"人妖",
                        value:2
                    }
                ],
                projectNameList:[
                    {
                        name:"南京冠霆智能科技有限公司",
                        id:1,
                        children:[
                            {
                                name:"看守所项目",
                                id:11
                            },
                            {
                                name:"拘留所项目",
                                id:12
                            },
                            {
                                name:"戒毒所项目",
                                id:13
                            },
                            {
                                name:"安康医院项目",
                                id:14
                            }
                        ]
                    },
                    {
                        name:"亚信安全有限公司",
                        id:2,
                        children:[
                            {
                                name:"亚信智网有限公司",
                                id:21,
                                children:[
                                    {
                                        name:"SDP零信任项目",
                                        id:211
                                    },
                                    {
                                        name:"动态应用安全防护系统BSG",
                                        id:212
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name:"苏软科技（南京）有限公司",
                        id:3,
                        children:[
                            {
                                name:"云上贵州项目",
                                id:31
                            },
                            {
                                name:"红花街道h5项目",
                                id:32
                            },
                            {
                                name:"温州市党政机关信息化项目",
                                id:33
                            }
                        ]
                    },
                    {
                        name:"南京联创智慧城市科技有限公司",
                        id:4,
                        children:[
                            {
                                name:"U创办公管理系统",
                                id:41
                            },
                            {
                                name:"U创办公小程序",
                                id:42
                            }
                        ]
                    }
                ],
                identifyList:[
                    {
                        label:"学生",
                        value:0
                    },
                    {
                        label:"程序员",
                        value:1
                    }
                ],
                hobbyList:[
                    {
                        label:"唱",
                        value:0
                    },
                    {
                        label:"跳",
                        value:1
                    },
                    {
                        label:"rap",
                        value:2
                    },
                    {
                        label:"篮球",
                        value:3
                    }
                ]
            },
            buttonConfig:[
                {
                    btnName:"提交",
                    btnType:"primary",
                    btnSize:"default",
                    formRefName:formConfigRef,
                    btnClick:(formRef)=>{
                        console.log(formRef);
                        formRef.formValidate((valid)=>{
                            if(valid){
                                console.log(formConfig.submitData);
                            }
                        })
                    }
                }
            ],
            submitData:{
                name:"",
                description:"",
                bankPassword:"",
                idCard:"",
                phonenumber:"",
                birthday:"",
                age:0,
                gender:0,
                projectName:"",
                projectIntroduce:"",
                identify:1,
                switch:0,
                hobby:[0,1],
                file:[],
                file1:[],
                image:[],
                image1:[],
                image2:[],
                richtext:"",
                richtext1:"",
                evaluation:"",
                salary:""
            }
        });
    `
});


/*
    逻辑脚本代码区域
*/
const formConfig=reactive({
    elFormConfig:{
        labelWidth:"100px",
        labelSuffix:"："
    },
    itemConfig:[
        {
            labelName:"简介",
            dataName:"description",
            type:"input",
            inputType:"textarea",
            rows:3,
            width:24
        },
        {
            labelName:"姓名",
            dataName:"name",
            type:"input",
            inputType:"text",
            width:6,
            validate:[
                {
                    required:true,
                    message:"请输入姓名",
                    trigger:"blur"
                }
            ]
        },
        {
            labelName:"银行卡密码",
            dataName:"bankPassword",
            type:"input",
            inputType:"password",
            width:6
        },
        {
            labelName:"身份证号码",
            dataName:"idCard",
            type:"input",
            inputType:"number",
            width:6,
            otherValidate:"idCardValidator"
        },
        {
            labelName:"手机号码",
            dataName:"phonenumber",
            type:"input",
            inputType:"text",
            width:6,
            otherValidate:"phoneValidator"
        },
        {
            labelName:"出生日期",
            dataName:"birthday",
            type:"date",
            dateType:"date",
            width:6
        },
        {
            labelName:"年龄",
            dataName:"age",
            type:"number",
            width:6
        },
        {
            labelName:"性别",
            dataName:"gender",
            type:"select",
            dataListName:"genderList",
            width:6
        },
        {
            labelName:"参与项目",
            dataName:"projectName",
            type:"cascader",
            dataListName:"projectNameList",
            cascaderProps:{
                label:"name",
                value:"id",
                children:"children"
            },
            width:6
        },
        {
            labelName:"项目介绍",
            dataName:"projectIntroduce",
            type:"itemSlot",
            slotName:"projectIntroduce",
            style:"width:100%;"
        },
        {
            labelName:"身份",
            dataName:"identify",
            type:"radio",
            dataListName:"identifyList",
            width:6
        },
        {
            labelName:"开关",
            dataName:"switch",
            type:"switch",
            activeText:"开启",
            inactiveText:"关闭",
            activeValue:0,
            inactiveValue:1,
            width:6,
            change:(item,val)=>{
                // console.log(item,val);
                if(val === 1){
                    formConfig.itemConfig[1].validate=[]
                }else{
                    formConfig.itemConfig[1].validate=[
                        {
                            required:true,
                            message:"请输入姓名",
                            trigger:"blur"
                        }
                    ]
                };
                formConfigRef.value.createFormRules();
            }
        },
        {
            labelName:"爱好",
            dataName:"hobby",
            type:"checkbox",
            dataListName:"hobbyList",
            width:12
        },
        {
            labelName:"上传附件",
            dataName:"file",
            type:"upload",
            fileList:[],
            limit:1,
            uploadText:"不上传服务器方式",
            width:12,
            previewFn:(item)=>{
                console.log(item);
            }
        },
        {
            labelName:"上传附件",
            dataName:"file1",
            type:"upload",
            action:"http://47.122.16.23:8081/common/upload",
            headers:{
                Authorization:"Bearer ***"
            },
            autoUpload:true,
            fileList:[],
            limit:1,
            uploadText:"上传服务器方式",
            width:12,
            previewFn:(item)=>{
                console.log(item);
            }
        },
        {
            labelName:"上传图片",
            dataName:"image",
            type:"image",
            fileList:[],
            limit:1,
            fileTypeText:"不上传服务器方式",
            width:8
        },
        {
            labelName:"上传图片",
            dataName:"image1",
            type:"image",
            action:"http://47.122.16.23:8081/common/upload",
            headers:{
                Authorization:"Bearer ***"
            },
            autoUpload:true,
            fileList:[],
            limit:1,
            fileTypeText:"上传服务器方式",
            width:8
        },
        {
            labelName:"上传图片",
            dataName:"image2",
            type:"image",
            fileList:[],
            fileTypeText:"另一种样式",
            showIconImage:true,
            width:8
        },
        {
            labelName:"人物介绍",
            dataName:"richtext",
            type:"wangEditor",
            wangEditorConfig:{
                editorConfig:{
                    placeholder:"请输入内容......",
                    autoFocus:false
                }
            },
            width:24
        },
        {
            labelName:"项目成就",
            dataName:"richtext1",
            type:"vueEditor",
            editifyConfig:{
                autoHeight:true
            },
            width:24
        },
        {
            labelName:"个人评价",
            dataName:"evaluation",
            type:"slot",
            slotName:"evaluation",
            width:12
        }
    ],
    selectLists:{
        genderList:[
            {
                label:"男",
                value:0
            },
            {
                label:"女",
                value:1
            },
            {
                label:"人妖",
                value:2
            }
        ],
        projectNameList:[
            {
                name:"南京冠霆智能科技有限公司",
                id:1,
                children:[
                    {
                        name:"看守所项目",
                        id:11
                    },
                    {
                        name:"拘留所项目",
                        id:12
                    },
                    {
                        name:"戒毒所项目",
                        id:13
                    },
                    {
                        name:"安康医院项目",
                        id:14
                    }
                ]
            },
            {
                name:"亚信安全有限公司",
                id:2,
                children:[
                    {
                        name:"亚信智网有限公司",
                        id:21,
                        children:[
                            {
                                name:"SDP零信任项目",
                                id:211
                            },
                            {
                                name:"动态应用安全防护系统BSG",
                                id:212
                            }
                        ]
                    }
                ]
            },
            {
                name:"苏软科技（南京）有限公司",
                id:3,
                children:[
                    {
                        name:"云上贵州项目",
                        id:31
                    },
                    {
                        name:"红花街道h5项目",
                        id:32
                    },
                    {
                        name:"温州市党政机关信息化项目",
                        id:33
                    }
                ]
            },
            {
                name:"南京联创智慧城市科技有限公司",
                id:4,
                children:[
                    {
                        name:"U创办公管理系统",
                        id:41
                    },
                    {
                        name:"U创办公小程序",
                        id:42
                    }
                ]
            }
        ],
        identifyList:[
            {
                label:"学生",
                value:0
            },
            {
                label:"程序员",
                value:1
            }
        ],
        hobbyList:[
            {
                label:"唱",
                value:0
            },
            {
                label:"跳",
                value:1
            },
            {
                label:"rap",
                value:2
            },
            {
                label:"篮球",
                value:3
            }
        ]
    },
    buttonConfig:[
        {
            btnName:"提交",
            btnType:"primary",
            btnSize:"default",
            formRefName:formConfigRef,
            btnClick:(formRef)=>{
                console.log(formRef);
                formRef.formValidate((valid)=>{
                    if(valid){
                        console.log(formConfig.submitData);
                    }
                })
            }
        }
    ],
    submitData:{
        name:"",
        description:"",
        bankPassword:"",
        idCard:"",
        phonenumber:"",
        birthday:"",
        age:0,
        gender:0,
        projectName:"",
        projectIntroduce:"",
        identify:1,
        switch:0,
        hobby:[0,1],
        file:[],
        file1:[],
        image:[],
        image1:[],
        image2:[],
        richtext:"",
        richtext1:"",
        evaluation:"",
        salary:""
    }
});
const propsTableConfig=reactive({
    elTableConfig:{
        border:true,
        defaultExpandAll:true,
        rowKey:"attrName",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            // if((rowIndex === 0 && columnIndex === 0) ||
            //     (rowIndex === 7 && columnIndex === 0) ||
            //     (rowIndex === 65 && columnIndex === 0) ||
            //     (rowIndex === 66 && columnIndex === 0) ||
            //     (rowIndex === 73 && columnIndex === 0) ||
            //     (rowIndex === 74 && columnIndex === 0)
            // ){
            //     return {
            //         "font-weight":"bolder",
            //         color:"#2d8cf0"
            //     }
            // }
        }
    },
    headerConfig:[
        {
            label:"属性名",
            prop:"attrName",
            type:"text",
            width:200
        },
        {
            label:"类型",
            prop:"attrType",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
        {
            label:"可取值",
            prop:"valuable",
            type:"text",
            replaceValue:"-"
        },
        {
            label:"默认值",
            prop:"default",
            type:"text",
            width:150
        }
    ],
    tableData:[
        {
            attrName:"elFormConfig",
            attrType:"object",
            description:"el-form标签元素上的相关配置",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"labelPosition",
                    attrType:"string",
                    description:"label标签的对齐方式",
                    valuable:"'left' | 'right' | 'top'",
                    default:"right",
                },
                {
                    attrName:"labelWidth",
                    attrType:"string/number",
                    description:"label标签的长度",
                    valuable:"-",
                    default:"60px",
                },
                {
                    attrName:"labelSuffix",
                    attrType:"string/number",
                    description:"label标签的后缀",
                    valuable:"-",
                    default:"'：'",
                },
                {
                    attrName:"size",
                    attrType:"string",
                    description:"表单内组件的尺寸",
                    valuable:"'' | 'large' | 'default' | 'small'",
                    default:"default",
                },
                {
                    attrName:"className",
                    attrType:"string",
                    description:"el-form的自定义类名",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"style",
                    attrType:"string",
                    description:"最外层元素即QilinForm元素的自定义行内样式",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"border",
                    attrType:"boolean",
                    description:"是否将表单元素转为表格样式",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"borderColor",
                    attrType:"string",
                    description:"表格样式的边框颜色",
                    valuable:"-",
                    default:"#E9E9E9",
                },
                {
                    attrName:"validateOnRuleChange",
                    attrType:"boolean",
                    description:"是否在rules属性改变后立即触发一次验证",
                    valuable:"true/false",
                    default:"false",
                },
            ]
        },
        {
            attrName:"itemConfig",
            attrType:"array",
            description:"表单内每个组件的配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"labelName",
                    attrType:"string",
                    description:"label名称",
                    valuable:"-",
                    default:"默认名称",
                },
                {
                    attrName:"dataName",
                    attrType:"string",
                    description:"对应后台的数据字段名",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"isHide",
                    attrType:"boolean",
                    description:"是否隐藏该表单项",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"hideLabel",
                    attrType:"boolean",
                    description:"是否隐藏label字段",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"labelNameText",
                    attrType:"string",
                    description:"label标签的额外字段",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"type",
                    attrType:"string",
                    description:"表单组件类型",
                    valuable:"'input' | 'number' | 'select' | 'cascader' | 'radio' | 'switch' | 'date' | 'checkbox' | 'rate' | 'upload' | 'image' | 'wangEditor' | 'vueEditor' | 'slot' | 'itemSlot'",
                    default:"input",
                },
                {
                    attrName:"inputType",
                    attrType:"string",
                    description:"input的类型，当且仅当type=input时生效",
                    valuable:"'text' | 'number' | 'password' | 'textarea'",
                    default:"text",
                },
                {
                    attrName:"showPassword",
                    attrType:"boolean",
                    description:"是否显示切换密码图标，当且仅当inputType=password时生效",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"autocomplete",
                    attrType:"string",
                    description:"是否启用表单自动完成的功能，当且仅当type=input时生效，设置为off即关闭自动填充（有些浏览器并不生效，测试设置为new-password即可）",
                    valuable:"'on' | 'off' | 'new-password' | 'new-text' | ...",
                    default:"new-text",
                },
                {
                    attrName:"clearable",
                    attrType:"boolean",
                    description:"是否显示可以一键清空按钮",
                    valuable:"true/false",
                    default:"true",
                },
                {
                    attrName:"rows",
                    attrType:"number",
                    description:"行高，当且仅当inputType=textarea时生效",
                    valuable:"-",
                    default:2,
                },
                {
                    attrName:"number",
                    attrType:"number",
                    description:"当输入框为数字输入框时，允许输入的整数位数，当inputType=number或者inputType=true时生效，你也可以直接在项目中用此指令v-number",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"decimal",
                    attrType:"number",
                    description:"当输入框为数字输入框时，允许输入的小数位数，当inputType=number或者inputType=true时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"maxlength",
                    attrType:"number",
                    description:"最大输入长度，当inputType为text、textarea、password时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"minlength",
                    attrType:"number",
                    description:"最小输入长度，当inputType为text、textarea、password时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"prefixIcon",
                    attrType:"string",
                    description:"输入框前置内置图标，当且仅当type=input时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"prefixSlotName",
                    attrType:"string",
                    description:"输入框前置内置图标插槽名称，当且仅当type=input时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"suffixIcon",
                    attrType:"string",
                    description:"输入框后置内置图标，当且仅当type=input时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"suffixSlotName",
                    attrType:"string",
                    description:"输入框后置内置图标插槽名称，当且仅当type=input时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"max",
                    attrType:"number",
                    description:"最大输入数字，当且仅当type=number时生效",
                    valuable:"-",
                    default:"infinity"
                },
                {
                    attrName:"min",
                    attrType:"number",
                    description:"最小输入数字，当且仅当type=number时生效",
                    valuable:"-",
                    default:"-infinity"
                },
                {
                    attrName:"rateSize",
                    attrType:"string",
                    description:"rate的尺寸",
                    valuable:"'large' | 'default' | 'small' ",
                    default:"default"
                },
                {
                    attrName:"allowHalf",
                    attrType:"boolean",
                    description:"是否允许半选，当且仅当type=rate时生效",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"controlPosition",
                    attrType:"string",
                    description:"数字输入框的控制按钮的位置，当且仅当type=number时生效",
                    valuable:"'' | 'right' ",
                    default:"-"
                },
                {
                    attrName:"dataListName",
                    attrType:"string",
                    description:"下拉数据名称对应selectLists中属性名，当type=select、cascader、checkbox、radio时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"multiple",
                    attrType:"boolean",
                    description:"是否可以多选，当type=select、checkbox时生效",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"collapseTags",
                    attrType:"boolean",
                    description:"多选时是否将选中值按文字的形式展示，当type=select时生效",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"filterable",
                    attrType:"boolean",
                    description:"是否可搜索，当type=select时生效",
                    valuable:"true/false",
                    default:"true"
                },
                {
                    attrName:"cascaderProps",
                    attrType:"object",
                    description:"配置级联选择器的选项，具体的配置参数详见element官网文档，当type=cascader时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"customLabelName",
                    attrType:"string",
                    description:"下拉选项中自定义label对应字段值，旧版本selectOptionLabelName，当type=select、radio、checkbox时生效",
                    valuable:"-",
                    default:"label"
                },
                {
                    attrName:"customValueName",
                    attrType:"string",
                    description:"下拉选项中自定义value对应字段值，旧版本selectOptionValueName，当type=select、radio、checkbox时生效",
                    valuable:"-",
                    default:"value"
                },
                {
                    attrName:"loading",
                    attrType:"boolean",
                    description:"是否正在从远程获取数据，当type=select时生效",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"remote",
                    attrType:"boolean",
                    description:"其中的选项是否从服务器远程加载，当type=select时生效",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"remoteMethod",
                    attrType:"function",
                    description:"自定义远程搜索方法，启用远程搜索需要开filterable和remote设置为true，当type=select时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"dateType",
                    attrType:"string",
                    description:"时间选择器类型，当type=date时生效",
                    valuable:"'year' | 'years' | 'month' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange'",
                    default:"date"
                },
                {
                    attrName:"defaultTime",
                    attrType:"Date/[Date,Date]",
                    description:"选择日期后的默认时间值，默认8点半，当type=date且为范围选择时生效",
                    valuable:"-",
                    default:"new Date(2000,1,1,8,30,0)"
                },
                {
                    attrName:"defaultValue",
                    attrType:"Date/[Date,Date]",
                    description:"选择器打开时默认显示的时间",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"format",
                    attrType:"string",
                    description:"显示在输入框中的格式化时间设置，当type=date时生效",
                    valuable:"-",
                    default:"YYYY-MM-DD HH:mm:ss"
                },
                {
                    attrName:"valueFormat",
                    attrType:"string",
                    description:"传给后台的格式化时间设置，当type=date时生效",
                    valuable:"-",
                    default:"YYYY-MM-DD HH:mm:ss"
                },
                {
                    attrName:"startPlaceholder",
                    attrType:"string",
                    description:"日期开始提示语，当type=date且dateType=***range时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"endPlaceholder",
                    attrType:"string",
                    description:"日期结束提示语，当type=date且dateType=***range时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"timeFormat",
                    attrType:"string",
                    description:"时间选择器时分秒下拉列表中显示的时间格式，当type=date时生效",
                    valuable:"-",
                    default:"HH:mm:ss"
                },
                {
                    attrName:"rangeSeparator",
                    attrType:"string",
                    description:"时间选择器的范围分隔符，当type=date且dateType=***range时生效",
                    valuable:"-",
                    default:"至"
                },
                {
                    attrName:"switchSize",
                    attrType:"string",
                    description:"switch的尺寸大小，当type=switch时生效",
                    valuable:"'' | 'large' | 'default' | 'small'",
                    default:"default"
                },
                {
                    attrName:"activeText",
                    attrType:"string",
                    description:"switch打开时的文字描述，当type=switch时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"inactiveText",
                    attrType:"string",
                    description:"switch关闭时的文字描述，当type=switch时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"activeValue",
                    attrType:"string",
                    description:"switch状态为on时的值，当type=switch时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"inactiveValue",
                    attrType:"string",
                    description:"switch状态为off时的值，当type=switch时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"inlinePrompt",
                    attrType:"boolean",
                    description:"switch时图标或文字是否显示在开关内，当type=switch时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"width",
                    attrType:"number",
                    description:"表单每项组件的栅栏占比宽度",
                    valuable:"6 | 8 | 12 | 16 | 18 | 24",
                    default:24
                },
                {
                    attrName:"className",
                    attrType:"string",
                    description:"表单每项组件即el-form-item的自定义类名",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"itemStyle",
                    attrType:"string",
                    description:"表单每项组件即el-form-item的自定义样式",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"disabled",
                    attrType:"boolean",
                    description:"是否禁用，当type='input' | 'number' | 'select' | 'cascader' | 'radio' | 'switch' | 'date' | 'checkbox'时生效",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"slotName",
                    attrType:"string",
                    description:"slot具名插槽名称，当type=slot时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"style",
                    attrType:"string",
                    description:"额外的行内样式，当type='input' | 'select' | 'cascader' | 'radio' | 'switch' | 'checkbox'时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"dateWidth",
                    attrType:"number",
                    description:"date组件元素的长度，默认为auto，当type=date时生效",
                    valuable:"-",
                    default:"auto"
                },
                {
                    attrName:"placeholder",
                    attrType:"string",
                    description:"表单占位符提示语",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"validate",
                    attrType:"array",
                    description:"表单的简单校验规则，取值为对象数组",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"otherValidate",
                    attrType:"string",
                    description:"Qilin表单组件的内置校验规则",
                    valuable:" 'emailValidator' | 'phoneValidator' | 'idCardValidator' ",
                    default:"-"
                },
                {
                    attrName:"change",
                    attrType:"function",
                    description:"change事件",
                    valuable:"(item,val)=>{}",
                    default:"-"
                },
                {
                    attrName:"clear",
                    attrType:"function",
                    description:"clear事件，当type=input、select时生效",
                    valuable:"(item)=>{}",
                    default:"-"
                },
                {
                    attrName:"customFn",
                    attrType:"function",
                    description:"自定义事件，当type=image、upload且无指定action时生效，主要用于上传文件时手动即时上传文件至服务器",
                    valuable:"(item,file)=>{}",
                    default:"-"
                },
            ]
        },
        {
            attrName:"selectLists",
            attrType:"object",
            description:"下拉数据集，当type=select、checkbox、radio、cascader时其内属性名须对应dataListName的值",
            valuable:"-",
            default:"-",
        },
        {
            attrName:"buttonConfig",
            attrType:"array",
            description:"表单底部操作提交按钮相关配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"btnName",
                    attrType:"string",
                    description:"按钮名称",
                    valuable:"-",
                    default:"按钮",
                },
                {
                    attrName:"btnType",
                    attrType:"string",
                    description:"按钮名称，旧版本为type",
                    valuable:"'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'",
                    default:"default",
                },
                {
                    attrName:"btnSize",
                    attrType:"string",
                    description:"按钮尺寸，旧版本为size",
                    valuable:"'large' | 'default' | 'small'",
                    default:"default",
                },
                {
                    attrName:"className",
                    attrType:"string",
                    description:"按钮的自定义类名",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"formRefName",
                    attrType:"DOM",
                    description:"表单元素的DOM",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"btnClick",
                    attrType:"function",
                    description:"按钮的点击事件，旧版本click",
                    valuable:"(formRef,event)=>{}",
                    default:"-",
                }
            ]
        },
        {
            attrName:"buttonConfigClassName",
            attrType:"string",
            description:"表单底部按钮自定义类名",
            valuable:"-",
            default:"-",
        },
        {
            attrName:"submitData",
            attrType:"object",
            description:"提交到后台的数据集",
            valuable:"-",
            default:"-",
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const eventsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"事件名",
            prop:"eventName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"eventType",
            type:"text",
            width:120
        },
        {
            label:"参数",
            prop:"eventValue",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            eventName:"-",
            eventType:"function",
            eventValue:"item,value|event|undefined,undefined|ref",
            description:"每个itemConfig表单元素的change、blur、clear等事件，配置在itemConfig中，事件名就是他们的属性名，如change"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const exposesTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"方法名",
            prop:"exposeName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"exposeType",
            type:"text",
            width:100
        },
        {
            label:"参数",
            prop:"exposeValue",
            type:"text",
            width:100
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
    ],
    tableData:[
        {
            exposeName:"formValidate",
            exposeType:"function",
            exposeValue:"valid",
            description:"对整个表单的内容进行验证，接受一个回调函数或返回Promise"
        },
        {
            exposeName:"formResetFields",
            exposeType:"function",
            exposeValue:"props|undefined",
            description:"重置该表单项，将其值重置为初始值，并移除校验结果，未指定字段的话就是重置整个表单"
        },
        {
            exposeName:"formClearValidate",
            exposeType:"function",
            exposeValue:"props|undefined",
            description:"清理某个字段的表单验证信息，未指定字段的话就是清理整个表单"
        },
        {
            exposeName:"formValidateField",
            exposeType:"function",
            exposeValue:"props",
            description:"验证具体的某个字段"
        },
        {
            exposeName:"createFormRules",
            exposeType:"function",
            exposeValue:"-",
            description:"用于创建表单的校验规则，用于在更新表单校验规则后触发该方法，解决校验规则更新不成功的问题"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const slotsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"插槽名",
            prop:"slotName",
            type:"text",
            width:120
        },
        {
            label:"数据值",
            prop:"slotData",
            type:"text",
            width:180
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            slotName:"-",
            slotData:"data:{scope,item}",
            description:"设置itemConfig配置项中的type为slot或者itemSlot时即可使用，用于需要对元素某项进行特殊处理的需求，其中设置的slotName属性值就是该插槽名"
        },
        {
            slotName:"extraFormItem",
            slotData:"-",
            description:"用于需要自定义表单插槽，该插槽位置在所有表单项之后"
        },
        {
            slotName:"extraItem",
            slotData:"-",
            description:"用于需要自定义表单之外的插槽，该插槽位置在表单元素之后"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>

</style>
